<template>
  <div class="create-car-page">
    <div class="page-header">
      <h1>新增车辆信息</h1>
      <div class="header-actions">
        <button @click="goBack" class="back-button">返回</button>
      </div>
    </div>
    
    <form @submit.prevent="saveCar" class="car-form">
      <div class="form-group">
        <label>品牌:<span class="required">*</span></label>
        <input v-model="carData.brand" required list="brands" />
        <datalist id="brands">
          <option v-for="brand in brandSuggestions" :key="brand" :value="brand" />
        </datalist>
      </div>
      <div class="form-group">
        <label>配置:<span class="required">*</span></label>
        <input v-model="carData.config" required />
      </div>
      <div class="form-group">
        <label>指导价:<span class="required">*</span></label>
        <input v-model="carData.guidePrice" required />元
      </div>
      <div class="form-group">
        <label>近期优惠:</label>
        <input v-model="carData.recentDiscount" />
      </div>
      <div class="form-group">
        <label>裸车价格:<span class="required">*</span></label>
        <input v-model="carData.nakedCarPrice" required />元
      </div>
      <div class="form-group">
        <label>保险费用:<span class="required">*</span></label>
        <input v-model="carData.insuranceFee" required />元
      </div>
      <div class="form-group">
        <label>购置税:<span class="required">*</span></label>
        <input v-model="carData.purchaseTax" required />元
      </div>
      <div class="form-group">
        <label>上牌费用:<span class="required">*</span></label>
        <input v-model="carData.licenseFee" required />元
      </div>
      <div class="form-group">
        <label>全款落地:<span class="required">*</span></label>
        <input v-model="carData.fullPrice" required />元
      </div>
      <div class="form-group">
        <label>首付:</label>
        <input v-model="carData.downPayment" />元
      </div>
      <div class="form-group">
        <label>贷款金额:</label>
        <input v-model="carData.loanAmount" />元
      </div>
      <div class="form-group">
        <label>贷款年期:</label>
        <input v-model="carData.loanTerm" />年
      </div>
      <div class="form-group">
        <label>年利率:</label>
        <input v-model="carData.interestRate" />%
      </div>
      <div class="form-group">
        <label>每月还款额:</label>
        <input v-model="carData.monthlyPayment" />元
      </div>
      <div class="form-group">
        <label>总利息:</label>
        <input v-model="carData.totalInterest" />元
      </div>
      <div class="form-actions">
        <button type="submit" class="save-button">保存</button>
        <button type="button" @click="goBack" class="cancel-button">取消</button>
      </div>
    </form>
  </div>
</template>

<script>
import { getBrands, createBrand, createConfig } from '@/services/api';

export default {
  name: 'CreateCarView',
  data() {
    return {
      carData: {
        brand: '',
        config: '',
        guidePrice: '',
        recentDiscount: '',
        nakedCarPrice: '',
        insuranceFee: '',
        purchaseTax: '',
        licenseFee: '',
        fullPrice: '',
        downPayment: '',
        loanAmount: '',
        loanTerm: '',
        interestRate: '',
        monthlyPayment: '',
        totalInterest: ''
      },
      brands: [],
      brandSuggestions: []
    };
  },
  async mounted() {
    await this.loadBrands();
    this.extractBrandSuggestions();
  },
  methods: {
    async loadBrands() {
      try {
        const response = await getBrands();
        this.brands = response.data;
      } catch (error) {
        console.error('加载品牌信息失败:', error);
      }
    },
    extractBrandSuggestions() {
      this.brandSuggestions = this.brands.map(brand => brand.name);
    },
    async saveCar() {
      try {
        // 检查品牌是否存在，如果不存在则创建
        let brand = this.brands.find(b => b.name === this.carData.brand);
        if (!brand) {
          // 创建新品牌
          const brandResponse = await createBrand({ name: this.carData.brand });
          brand = brandResponse.data;
        }
        
        // 为品牌创建新配置
        const configData = {
          name: this.carData.config,
          guidePrice: this.carData.guidePrice,
          recentDiscount: this.carData.recentDiscount,
          nakedCarPrice: this.carData.nakedCarPrice,
          insuranceFee: this.carData.insuranceFee,
          purchaseTax: this.carData.purchaseTax,
          licenseFee: this.carData.licenseFee,
          fullPrice: this.carData.fullPrice,
          downPayment: this.carData.downPayment,
          loanAmount: this.carData.loanAmount,
          loanTerm: this.carData.loanTerm,
          interestRate: this.carData.interestRate,
          monthlyPayment: this.carData.monthlyPayment,
          totalInterest: this.carData.totalInterest
        };
        
        await createConfig(this.carData.brand, configData);
        
        // 保存成功后返回管理页面
        this.$router.push('/manage');
      } catch (error) {
        console.error('保存车辆信息失败:', error);
        alert('保存失败，请重试');
      }
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.create-car-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #2c3e50;
  margin: 0;
}

.back-button {
  background-color: #6c757d;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.back-button:hover {
  background-color: #5a6268;
}

.car-form {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 30px;
}

.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.form-group label {
  width: 120px;
  font-weight: bold;
  color: #2c3e50;
  text-align: right;
  margin-right: 15px;
}

.form-group input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.required {
  color: red;
  margin-left: 4px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.save-button, .cancel-button {
  padding: 12px 30px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.save-button {
  background-color: #42b983;
  color: white;
}

.cancel-button {
  background-color: #6c757d;
  color: white;
}

.save-button:hover {
  background-color: #359c6d;
}

.cancel-button:hover {
  background-color: #5a6268;
}
</style>